<template>
    <div>
      <div class="home">
        <div class="aa">
          <input v-model="username" type="text" placeholder="请输入用户名" name="username" ref="inp" class="in1">
          <br>
          <input v-model="password" type="password" placeholder="请输入密码" name="password" ref="inp1" class="in2" >
          <br>
          <!--<input type="password" placeholder="请输入密码" required >-->
          <button type="submit" @click="zc">注册</button>

        </div>
      </div>

    </div>
</template>

<script>
import axios from 'axios'
    export default {
      data: function () {
        return {
            username:'',
          password:''

        }
      },
      components: {},
      methods: {
        zc() {
            var username = $(this.$refs.inp).val();
            var password = $(this.$refs.inp1).val();

            axios.get('/api/zc', {
              params:{
                username: this.username,
                password: this.password
              }
            }).then((val) => {
              console.log(val);
              if(val.data.error === 0){
                alert(val.data.msg);
                setTimeout(function () {
                  this.location.href = '#/LoginPage'
                },1000)
              }else{
                alert(val.data.msg)
              }
            }).catch((err) => {
              console.log(err)
            })



        }
      }
    }
</script>

<style scoped>
.home{
  width: 100%;
  height: 500px;
  background: url("https://s17.mogucdn.com/p2/170105/upload_541i9di2b3icf9j13f24e0bg7b1i6_1920x600.png");
  position: relative;
}
  .aa{
    width: 350px;
    height: 350px;
    background: #fedad8;
    padding-top: 50px;
    position: absolute;
    right: 200px;
    top:100px;
  }
  .aa input{
    border-radius: 3px;
    width: 200px;
    height: 30px;
    margin: 10px 0;
    border: none;
  }
  .aa button{
    width:100px ;
    height: 30px;
    margin-top: 20px;
    border: none;
  }
.aa button:hover{
  background: red;
}
</style>
